﻿@namespace Maanfee.Dashboard.Views.Core
@using MudBlazor.Utilities;

<style>

    .maanfee-theme-box-xs {
        appearance: none;
        border-radius: 0.75rem;
        border: 0;
        height: 24px;
        margin-bottom: 0.2rem;
        margin-inline: 0.2rem;
        width: 24px;
    }

    .maanfee-themeColors.active:before, .maanfee-themeColors.active:before {
        border-color: #fff;
        border-style: solid;
        border-width: 0 0 3px 3px;
        content: "";
        height: 0.45rem;
        inset: 50% 0 0 50%;
        position: absolute;
        transform-origin: center center;
        transform: translateX(-50%) translateY(-50%) rotate(-45deg);
        width: 0.7rem;
    }

</style>

<MudDrawer Anchor="@(SharedLayoutSettings.IsRTL ? Anchor.Left : Anchor.Right)"
           @bind-Open="ThemingDrawerOpen" Elevation="3" Variant="@DrawerVariant.Temporary" Width="260px">

    <MudDrawerHeader Class="align-center">
        <MudText Typo="Typo.body1">
            <b>@DashboardResource.StringTheme</b>
        </MudText>
        <MudSpacer />
        <MudIconButton Color="Color.Default"
                       Icon="@Icons.Material.Filled.Close"
                       OnClick="@(() => ThemingDrawerOpenChanged.InvokeAsync(false))"
                       Size="Size.Small" />
    </MudDrawerHeader>
    <MudDivider />
    <div class="ma-6">
        <MudText Typo="Typo.body2">
            <b>@DashboardResource.StringColor</b>
        </MudText>
        <MudGrid Class="my-2 mt-2">
            @foreach (var color in SupportedThemeColors)
            {
                <button class="@(color.Value == SharedLayoutSettings.ThemeColor ? "maanfee-theme-box-xs maanfee-themeColors active" : "maanfee-theme-box-xs")"
                    style="@($"background: {color.Value};")" onclick="@(() => UpdateThemePrimaryColor(color))"></button>
            }
        </MudGrid>
        <MudDivider Class="my-2 mt-2" />
        <MudSwitch Color="Color.Primary" @bind-Value="@SharedLayoutSettings.IsFullscreenMode">
            <MudText Typo="Typo.caption" Color="Color.Primary">@DashboardResource.StringRunFullscreenMode</MudText>
        </MudSwitch>
        <MudDivider Class="my-2 mt-2" />

    </div>

</MudDrawer>

<MudOverlay DarkBackground="false" Visible="ThemingDrawerOpen" VisibleChanged="ThemingDrawerOpenChanged"
            OnClick="@(() => ThemingDrawerOpenChanged.InvokeAsync(false))" />

@code {

    [EditorRequired][Parameter] public bool ThemingDrawerOpen { get; set; }

    [EditorRequired][Parameter] public EventCallback<bool> ThemingDrawerOpenChanged { get; set; }

    // **************************************

    private static MudColor PrimaryColor = new PaletteLight().Primary;

    private readonly List<MudColor> SupportedThemeColors = new()
    {
        PrimaryColor,
        Colors.Amber.Default,
        Colors.Blue.Default,
        Colors.BlueGray.Default,
        Colors.Brown.Default,
        Colors.Cyan.Default,
        Colors.DeepOrange.Default,
        Colors.DeepPurple.Default,
        Colors.Gray.Default,
        Colors.Green.Default,
        Colors.Indigo.Default,
        Colors.LightBlue.Default,
        Colors.LightGreen.Default,
        Colors.Lime.Default,
        Colors.Orange.Default,
        Colors.Pink.Default,
        Colors.Purple.Default,
        Colors.Red.Default,
        Colors.Teal.Default,
        Colors.Yellow.Default,
    };

    private async Task UpdateThemePrimaryColor(MudColor color)
    {
        PrimaryColor = color;
        await UserPreferencesChanged.InvokeAsync(color);
        // *******************
        SharedLayoutSettings.ThemeColor = color.Value;
        await LocalConfiguration.SetConfigurationAsync();
    }

    [EditorRequired][Parameter] public EventCallback<MudColor> UserPreferencesChanged { get; set; }

    // **************************************

}
